﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoGroup.aspx.cs" Inherits="WEB.APP.Modules.System.AutoGroup" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        var renderSex = function (value, idxclomn, record) {
            return value == true ? 'Male' : 'Female';
        }
        var renderClientId = function (value, idxclomn, record) {
            var string ='0000' + value.toString();
            return 'C' + string.substring(string.length - 4, string.length)
        }
        var renderPROJECTId = function (value, idxclomn, record) {
            var string = '0000' + value.toString();
            return 'P' + string.substring(string.length - 4, string.length)
        }
        var RendererElectiveLeft = function (value, idxclomn, record) {
            switch (value) {
                case 0:
                    return 'No';
                case 1:
                    return 'Yes, but no elective left';
                case 2:
                    return 'Yes and has an elective left';
                default:
                    return value;
            }
        }
        var RendererProjectTypeS = function (value, idxclomn, record) {
            if (value === null || value === '')
                return value;
            var _temp = '';
            var _items = value.split(',');
            for (var i = 0; i < _items.length; i++) {
                if (_items[i] === null || _items[i] === '')
                    continue;

                switch (_items[i]) {
                    case '1':
                        _temp += 'DD&D' + ', ';
                        continue;
                    case '2':
                        _temp += 'SD' + ', ';
                        continue;
                    case '3':
                        _temp += 'MA' + ', ';
                        continue;
                    case '4':
                        _temp += 'WA' + ', ';
                        continue;
                    case '5':
                        _temp += 'SA&D' + ', ';
                        continue;
                    case '6':
                        _temp += 'WD&D' + ', ';
                        continue;
                    case '7':
                        _temp += 'SA' + ', ';
                        continue;
                    case '8':
                        _temp += 'OSD' + ', ';
                        continue;
                    case '9':
                        _temp += 'WSD' + ', ';
                        continue;
                    default:
                        _temp += _items[i] + ', ';
                        continue;
                }
            }
            return _temp.substring(0, _temp.length - 2);
        }
        var RendererProjectType = function (value, idxclomn, record) {
            switch (value) {
                case 1:
                    return 'Database Design and Development';
                case 2:
                    return 'Software Development';
                case 3:
                    return 'Mobile Application';
                case 4:
                    return 'Web Application';
                case 5:
                    return 'Systems Analysis and Design';
                case 6:
                    return 'Website Design and Development';
                case 7:
                    return 'Systems Administration';
                case 8:
                    return 'Operating System Development';
                case 9:
                    return 'Web Systems development';
                default:
                    return value;
            }
        }
        var RendererProjectSize = function (value, idxclomn, record) {
            switch (value) {
                case 0:
                    return 'Easy';
                case 1:
                    return 'Medium complexity';
                case 2:
                    return 'Complex';
                default:
                    return value;
            }
        }
        var RendererInterested = function (value, idxclomn, record) {
            return value ? 'Yes' : 'No';
        }

        var submitValue = function (grid) {
            grid.submitData(true);
        };
    </script>
    <style type="text/css">
        #grdGroupProject
        {
            margin-left: -1px;
            margin-bottom: 1px;
        }
        #grdStudent
        {
            margin-right: 1px;
        }
        #Panel1
        {
            margin-left: -1px;
            margin-bottom: 1px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:Hidden runat="server" ID="hfIsEdit" />
    <ext:Hidden runat="server" ID="hfIsDelete" />
    <ext:Hidden runat="server" ID="hfKeyword" />
    <ext:Hidden runat="server" ID="hdScreenDetailID" />
    <ext:Viewport ID="Viewport1" runat="server" Layout="RowLayout" Split="false">
        <Items>
            <ext:GridPanel ID="grdGroupProject" runat="server" StripeRows="true" TrackMouseOver="true"
                AutoExpandColumn="StudentName" Border="true" RowHeight="0.6" Title="Group student by Project"
                Header="false">
                <Store>
                    <ext:Store ID="stGroupProject" runat="server" OnRefreshData="stGroupProject_OnRefreshData" OnSubmitData="grdGroupProject_Submit"
                        WarningOnDirty="false" GroupField="ProjectId">
                        <Proxy>
                            <ext:PageProxy />
                        </Proxy>
                        <Reader>
                            <ext:JsonReader IDProperty="ClientId">
                                <Fields>
                                    <ext:RecordField Name="StudentId" />
                                    <ext:RecordField Name="BirthDt" Type="Date" />
                                    <ext:RecordField Name="Sex" />
                                    <ext:RecordField Name="SurName" />
                                    <ext:RecordField Name="GivenName" />
                                    <ext:RecordField Name="Gpa" />
                                    <ext:RecordField Name="ProjectId" />
                                    <ext:RecordField Name="ProjectName" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                        <DirectEventConfig IsUpload="true" />
                    </ext:Store>
                </Store>
                <TopBar>
                    <ext:Toolbar ID="tbMain" runat="server">
                        <Items>
                            <ext:Button ID="btnReload" runat="server" Text="Reload" Icon="Reload">
                                <Listeners>
                                    <Click Handler="stGroupProject.reload();" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:Button ID="btnExport" runat="server" Text="Export CSV" Icon="PageLightning">
                                <Listeners>
                                    <Click Handler="submitValue(#{stGroupProject});" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:ToolbarFill />
                            <ext:Button ID="btnAutoGroup" runat="server" Text="Auto Group Student" Icon="TableAdd">
                                <DirectEvents>
                                    <Click OnEvent="btnAutoGroup_Click" />
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel ID="ColumnModel3" runat="server">
                    <Columns>
                        <ext:RowNumbererColumn Width="50" Locked="true" />
                        <ext:Column ColumnID="StudentId" DataIndex="StudentId" Header="Person Id" Width="70"
                            Align="Right" Locked="true">
                        </ext:Column>
                        <ext:Column ColumnID="Sex" DataIndex="Sex" Header="Sex" Width="70">
                            <Renderer Fn="renderSex" />
                        </ext:Column>
                        <ext:DateColumn ColumnID="BirthDt" DataIndex="BirthDt" Header="Birth Dt" Format="MM/dd/yyyy"
                            Width="80">
                        </ext:DateColumn>
                        <ext:Column ColumnID="StudentName" DataIndex="StudentName" Header="Name" Width="130">
                            <Renderer Handler="return record.data.GivenName + ' ' + record.data.SurName;" />
                        </ext:Column>
                        <ext:Column ColumnID="Gpa" DataIndex="Gpa" Header="Gpa" Width="45" Align="Right">
                        </ext:Column>
                        <ext:Column ColumnID="ProjectId" DataIndex="ProjectId">
                            <Renderer Handler="return record.data.ProjectId + ': ' + record.data.ProjectName;" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Listeners>
                    <RowDblClick Handler="this.getSelectionModel().selectRow(rowIndex); AddTapDocument(hdScreenDetailID.getValue(), item.selModel.selections.items[0].data.ProjectId);" />
                </Listeners>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                </SelectionModel>
                <View>
                    <ext:GroupingView ID="GroupingView1" runat="server" ShowGroupName="false" EnableNoGroups="true" HideGroupedColumn="true"/>
                </View> 
                <LoadMask ShowMask="true" />
            </ext:GridPanel>
            <ext:Panel ID="Panel1" runat="server" BodyStyle="background-color:transparent;" Layout="ColumnLayout"
                Border="False" RowHeight="0.4" Split="false">
                <Items>
                    <ext:GridPanel ID="grdStudent" runat="server" ColumnWidth="0.5" StripeRows="true"
                        Border="true" Title="Unallocated Student">
                        <Store>
                            <ext:Store ID="stStudent" runat="server" OnRefreshData="stStudent_OnRefreshData" WarningOnDirty="false">
                                <Proxy>
                                    <ext:PageProxy />
                                </Proxy>
                                <Reader>
                                    <ext:JsonReader IDProperty="StudentId">
                                        <Fields>
                                            <ext:RecordField Name="StudentId" />
                                            <ext:RecordField Name="Sex" />
                                            <ext:RecordField Name="BirthDt" Type="Date" />
                                            <ext:RecordField Name="SurName" />
                                            <ext:RecordField Name="GivenName" />
                                            <ext:RecordField Name="Gpa" />
                                            <ext:RecordField Name="ElectiveLeft" />
                                            <ext:RecordField Name="ProjectType" />
                                            <ext:RecordField Name="Expertise" />
                                            <ext:RecordField Name="Interested" />
                                            <ext:RecordField Name="OtherSkill" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                                <BaseParams>
                                    <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                    <ext:Parameter Name="limit" Value="50" Mode="Raw" />
                                </BaseParams>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel2" runat="server" DefaultSortable="false">
                            <Columns>
                                <ext:RowNumbererColumn Width="50" Locked="true" />
                                <ext:Column ColumnID="StudentId" DataIndex="StudentId" Header="Person Id" Width="70"
                                    Align="Right" Locked="true">
                                </ext:Column>


                                <ext:Column ColumnID="StudentName" DataIndex="StudentName" Header="Name" Width="130">
                                    <Renderer Handler="return record.data.GivenName + ' ' + record.data.SurName;" />
                                </ext:Column>
                                <ext:Column ColumnID="Gpa" DataIndex="Gpa" Header="Gpa" Width="45" Align="Right">
                                </ext:Column>

                                <ext:Column ColumnID="ProjectType" DataIndex="ProjectType" Header="Project Type">
                                    <Renderer Fn="RendererProjectTypeS" />
                                </ext:Column>
                                <ext:Column ColumnID="Expertise" DataIndex="Expertise" Header="Expertise" />
                                <ext:Column ColumnID="Interested" DataIndex="Interested" Header="Interested" Align="Center"
                                    Width="60">
                                    <Renderer Fn="RendererInterested" />
                                </ext:Column>
                                <ext:Column ColumnID="OtherSkill" DataIndex="OtherSkill" Header="Other Skill" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" SingleSelect="true" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" StoreID="stStudent" runat="server" PageSize="50"
                                DisplayInfo="true" ActiveIndex="0" AutoDataBind="True">
                            </ext:PagingToolbar>
                        </BottomBar>
                        <LoadMask ShowMask="true" />
                    </ext:GridPanel>
                    <ext:GridPanel ID="grdProject" runat="server" ColumnWidth="0.5" StripeRows="true"
                        TrackMouseOver="true" AutoExpandColumn="Expertise" Border="true" Title="Unallocated Project">
                        <Store>
                            <ext:Store ID="stProject" runat="server" OnRefreshData="stProject_OnRefreshData"
                                WarningOnDirty="false">
                                <Proxy>
                                    <ext:PageProxy />
                                </Proxy>
                                <Reader>
                                    <ext:JsonReader IDProperty="ProjectId">
                                        <Fields>
                                            <ext:RecordField Name="ProjectId" />
                                            <ext:RecordField Name="ClientId" />
                                            <ext:RecordField Name="ProjectName" />
                                            <ext:RecordField Name="Expertise" />
                                            <ext:RecordField Name="ProjectType" />
                                            <ext:RecordField Name="ProjectDesc" />
                                            <ext:RecordField Name="ProjectYear" />
                                            <ext:RecordField Name="ProjectSize" />
                                            <ext:RecordField Name="OtherSkill" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                                <BaseParams>
                                    <ext:Parameter Name="start" Value="0" Mode="Raw" />
                                    <ext:Parameter Name="limit" Value="50" Mode="Raw" />
                                </BaseParams>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:RowNumbererColumn />
                                <ext:Column ColumnID="ProjectId" DataIndex="ProjectId" Header="Project Id">
                                <Renderer Fn="renderPROJECTId" /></ext:Column>
                                <ext:Column ColumnID="ClientId" DataIndex="ClientId" Header="Client Id"> <Renderer Fn="renderClientId" /></ext:Column>
                                <ext:Column ColumnID="ProjectName" DataIndex="ProjectName" Header="Project Name" />
                                <ext:Column ColumnID="Expertise" DataIndex="Expertise" Header="Expertise" />
                                <ext:Column ColumnID="ProjectType" DataIndex="ProjectType" Header="Project Type">
                                    <Renderer Fn="RendererProjectType" />
                                </ext:Column>
                                <ext:Column ColumnID="ProjectSize" DataIndex="ProjectSize" Header="Project Size">
                                    <Renderer Fn="RendererProjectSize" />
                                </ext:Column>
                                <ext:Column ColumnID="ProjectDesc" DataIndex="ProjectDesc" Header="Project Desc" />
                                <ext:Column ColumnID="ProjectYear" DataIndex="ProjectYear" Header="Project Year" />
                                <ext:Column ColumnID="OtherSkill" DataIndex="OtherSkill" Header="Other Skill" />
                            </Columns>
                        </ColumnModel>
                        <Listeners>
                            <RowDblClick Handler="this.getSelectionModel().selectRow(rowIndex); ViewDetail(#{grdProject});" />
                        </Listeners>
                        <BottomBar>
                            <ext:PagingToolbar ID="paddingBar" StoreID="stProject" runat="server" PageSize="50"
                                DisplayInfo="true" EmptyMsg="No data found" DisplayMsg="{0} - {1} in {2}" />
                        </BottomBar>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" SingleSelect="true" />
                        </SelectionModel>
                        <LoadMask ShowMask="true" />
                    </ext:GridPanel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
